<template>
    <div class="inform">
         <!--按钮-->
        <div class="btns">  
        <el-button size="small" round type="primary" @click="toAdd">添加</el-button>
        <el-button size="small" type="success" round>查询</el-button>
        <el-button size="small" type="warning" icon="el-icon-star-off" circle></el-button>
        </div>     
       <!--表格-->
        <div class="da">
        <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949">
        </el-switch>
        <el-tag>一</el-tag>
        </div>
       <el-table :data="list" style="width:100%" size="small">
           <el-table-column type="index" label="序号" width="180"></el-table-column>
           <el-table-column prop="content" label="内容" width="180"></el-table-column>
           <el-table-column prop="articleId" label="文章id" width="180"></el-table-column>
           <el-table-column prop="userId" label="用户id"></el-table-column> 
           <el-table-column  label="操作" width="150" align="center"> 
               <template v-slot="scope">  
                   <el-button size="small"  round type="danger" @click="del(scope.row)">删除</el-button>
                    <el-button size="small" type="primary" round @click="edit(scope.row)">更改</el-button>   
               </template>
               </el-table-column> 
        </el-table>

       
       <!--模态框-->
       


        <el-dialog class="customer_modal" title="添加inform" :visible.sync="dialogVisible" width="60%">
       
       {{form}}
        <el-form :model="form" label-width="100px">
            <el-form-item label="内容" >
                <el-input v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item label="作者id" >
                <el-input v-model="form.articleId"></el-input>
            </el-form-item>
            <el-form-item label="用户id">
                <el-input v-model="form.userId"></el-input>
            </el-form-item>

        </el-form>
       <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible=false" size="small">取消</el-button>          
           <el-button type="primary" @click="save" size="small">确定</el-button>
       </span>
       </el-dialog>


    </div>      
</template>

<script>
import {get, post} from '@/utils/request'

export default {
    data(){
        return{
            form:{},
            list:[],
            dialogVisible:false,
            value: true
        }
    }, 

    created(){
        this.loadData();
    },

    methods:{
                save(){
            let url="/inform/insertOrUpdate"
            get(url,this.form).then((response)=>{
                this.dialogVisible=false;
                this.$message({type:"success",message:response.message})
                this.loadData();
            })
        },

        del(row){
            let url="/inform/delete"
            get(url,{id:row.id}).then((response)=>{
                this.$message({type:"success",message:response.message})
                this.loadData();
            })
        },
        edit(row){
            this.form=row;
            this.dialogVisible=true;
        },

        loadData(){
            let url="/inform/findAllWithArticle";
            get(url).then((response)=>{
                this.list=response.data;
            });
        },
        toAdd(){
            this.dialogVisible = true;
        }  
  
    } 
}
</script>


<style scoped>

</style>
